<template>
    <div class="custom-header" :class="{'bgc-fff': type!=2}">
        <header
            v-if="type==2"
            class="headNav headNav1"
            :style="{ paddingTop: statusBarHeight + 'px', height: navHeight + 'px' }"
            >
            <section class="headArea" :style="{ height: headAreaHeight + 'px', marginTop: headAreaMarTop + 'px' }">
                <div class='leftBox' :style="{width: 'calc( 100% )'}">
                    <div class="inner">
                        <div @click="back" class="left-back"><van-icon size="20px" name="arrow-left" /></div>
                        {{title}}
                    </div>
                </div>
            </section>
        </header>
        <header
            v-else
            class="headNav"
            :style="{ paddingTop: statusBarHeight + 'px', height: navHeight + 'px' }"
            >
            <section class="headArea" :style="{ height: headAreaHeight + 'px', marginTop: headAreaMarTop + 'px' }">
                <div class='leftBox' :style="{width: 'calc( 100% )'}">
                    <div class="inner">
                        {{title}}
                    </div>
                </div>
            </section>
        </header>
        <slot name="content"></slot>
    </div>
</template>

<script>
export default {
    props: ['title', 'type'],
    data() {
        var sysInfo = wx.getSystemInfoSync()
        return {
            pixelRatio: sysInfo.pixelRatio, //系统像素比
            statusBarHeight: sysInfo.statusBarHeight, //系统状态栏高度
            navHeight: "", //顶部导航栏高度
            headAreaHeight: sysInfo.pixelRatio * 35 / sysInfo.pixelRatio, //顶部内容区域高度
            headAreaMarTop: "", //顶部内容区域外边距
            headleftBoxW: "", //顶部内容左侧区域外边距
            headRightBoxW: "", //顶部内容右侧区域外边距
            containersHeight: "", //页面内容区域高度
        };
    },
    mounted () {
        //IOS 与 安卓进行差异化处理
        if (this.getSysInfo().system.substring(0, 3) == "iOS") {
            this.navHeight = this.pixelRatio * 40 / this.pixelRatio;
            this.headAreaMarTop = this.pixelRatio * 0.5 / this.pixelRatio;
            this.headleftBoxW = this.getSysInfo().windowWidth - this.pixelRatio * 100 / this.pixelRatio;
            this.headRightBoxW = this.pixelRatio * 100 / this.pixelRatio;
            this.containersHeight = this.getSysInfo().windowHeight - (this.statusBarHeight + this.pixelRatio * 40 / this.pixelRatio);
        } else {
            this.navHeight = this.pixelRatio * 45 / this.pixelRatio;
            this.headAreaMarTop = this.pixelRatio * 2.5 / this.pixelRatio;
            this.headleftBoxW =  this.getSysInfo().windowWidth - this.pixelRatio * 110 / this.pixelRatio;
            this.headRightBoxW = this.pixelRatio * 110 / this.pixelRatio;
            this.containersHeight = this.getSysInfo().windowHeight -  (this.statusBarHeight + this.pixelRatio * 45 / this.pixelRatio);
        }
    },
    methods: {
        getSysInfo() {
            const res = wx.getSystemInfoSync()
            return res
        },
        changeType(type){
            if(this.activeIndex != type){
                this.activeIndex = type
                this.$emit("changeType", type)
            }
        },
        back(){
            wx.navigateBack({})
        }
    }
}
</script>

<style lang="scss" >
.custom-header{
    box-sizing: content-box;
    view{
        box-sizing: content-box;
    }
    position: fixed;
    z-index: 5;
    
    width: 100%;
    .headNav {
        // background-color: #fff;
        display: flex;
        align-items: center;
    }
    .headArea {
        width: 100%;
        // background-color: #fff;
    }
    .leftBox{
        text-align: center;
        height: 100%;
        float: left;
        .inner{
            height: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            position: relative;
            span{
                display: inline-block;
                border: 1px solid #ccc;
                padding: 6px 18px;
                font-size: 15px;
                border-radius: 24px;
                margin: 0 5px;
                &.active{
                    border: 1px solid #ff4141;
                    background: #ff4141;
                    color: #fff;
                }
            }
        }
    }
    .rightBox {
        // width: 30%;
        height: 100%;
        // background-color: #fff;
        float: right;
    }
    .left-back{
        position: absolute;
        left: 15px;
        top: 8px;
    }
}
</style>
